<template>
  <div class="labels">
    <div class="titleBox">
      <p class="title">已添加的标注</p>
    </div>
    <el-scrollbar>
      <div
        v-for="item in props.labels"
        :key="item.id"
        class="label"
        :class="{
          active: item.id === props.currentId,
        }"
      >
        <p @click="handleLabelClick(item)">{{ item.name }}</p>
        <span class="view" @click="handleView(item)">
          <el-icon><View /></el-icon>
        </span>
        <span class="edit" @click="handleEdit(item)">
          <el-icon color="#E6A23C"> <Edit /> </el-icon>
        </span>
        <span @click="handleDelete(item)">
          <el-icon color="#F56C6C"> <Delete /> </el-icon>
        </span>
      </div>
      <el-empty v-if="!props.labels.length" description="暂无标注" />
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { GeometryItem } from '../hooks/useLabel'

const props = defineProps<{
  currentId: string
  labels: GeometryItem[]
}>()

interface EmitsType {
  (e: 'labelClick', item: GeometryItem): void
  (e: 'deleteLabel', value: GeometryItem): void
  (e: 'editLabel', value: GeometryItem): void
  (e: 'viewLabel', value: GeometryItem): void
  (e: 'toggleLabels'): void
}
const emit = defineEmits<EmitsType>()

const handleLabelClick = (item: GeometryItem) => {
  emit('labelClick', item)
}

const handleDelete = (item: GeometryItem) => {
  emit('deleteLabel', item)
}

const handleEdit = (item: GeometryItem) => {
  emit('editLabel', item)
}

const handleView = (item: GeometryItem) => {
  emit('viewLabel', item)
}
</script>

<style scoped lang="scss">
.labels {
  padding: 10px;
  .titleBox {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    .title {
      font-size: 16px;
      font-weight: bold;
      color: #f5f5f5;
    }
    .hide {
      color: #f5f5f5;
      cursor: pointer;
    }
  }

  .label {
    color: #f5f5f5;
    padding: 4px 10px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &.active {
      background-color: #333;
    }
    &:hover {
      background-color: #333;
    }
    p {
      line-height: 1.5;
      width: 90%;
    }
    .edit {
      margin-right: 5px;
    }
    .view {
      margin-right: 5px;
    }
  }
}
</style>
